<template>
	<view class="pl30 pr30 pt48">
		<view class="header-bar"></view>
		<view class="fs34 fw-500 color-f">邀请好友</view>
		<view class="bg-f w-max radius20 mt436 pl30 pr30 text-center pt60 pb60">
			<view class="fw-500 fs30 mb30">您的邀请码</view>
			<u-message-input mode="box" :maxlength="6" :disabled-keyboard='true' :value='regcode' width='50' font-size='30'></u-message-input>
			<view class="fs24 color9 fw-500 mt20">邀请的好友也可以在注册时直接填写邀请码</view>
			<!-- 二维码盒子 -->
			<view class="flex row-center mt70">
				<view class="w350 h350 flex col-center row-center">
					<uqrcode ref="uQRCode" :text="url" :size='150'/>
				</view>
			</view>
			<!-- //二维码盒子 -->
			<!-- 按钮盒子 -->
			<view class="flex row-between mt80">
				<view class="w300">
					<u-button type='primary' shape="circle"  width='300rpx' style="height: 90rpx;" @click="drawCanvas">生成海报</u-button>
				</view>
				<view class="w300">
					<u-button type='primary' shape="circle" style="height: 90rpx; background-color: #FFFFFF; color: #FF6B35; border: 2rpx solid #FF6B35;" @click="copy">复制链接</u-button>
				</view>
				
			</view>
			<!-- //按钮盒子 -->
		</view>
		<canvas class="pf canvas" canvas-id="cardPoster"
			:style="[{width: '565rpx',	height: '872rpx',left:'9999px',borderRadius:'20rpx'}]"></canvas>
		<u-popup v-model="show" mode="center">
			<view class="poster-img">
				<image class="img" :src="posterImg" mode="widthFix"/>
				<view class="btn" @tap="saveImage">保存到相册</view>
				<view class="flex row-center">
					<image src="@/static/image/my/Close@2x.png" class="w50 h50" @click="show=false"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uqrcode  from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'
	import { saveImageToPhotosAlbum, showToast } from '@/uni_modules/sakura-canvas/js_sdk/util'
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
	export default {
		components:{uqrcode},
		onShow() {
			this.getinvite_friends()
		},
		mounted() {
			this.$nextTick(() => {
				this.createdDraw()
			})
		},
		data() {
			return {
				url:`http://gw.beiyuansm.com/h5/#/pages/login/register?regcode=${uni.getStorageSync('userInfo').regcode}&from=1`,
				show:false,
				posterImg:'',
				//二维码
				poster: '',
				//邀请码
				regcode: uni.getStorageSync('userInfo').regcode,
				// modal_qr: false,
				img: '/static/image/friend/friendBG.png',
			};
		},
		methods:{
			// 创建draw绘制对象
			createdDraw() {
				this.draw = new Draw({
					width: 586,
					height: 872,
					company: 'rpx',
					_this: this,
					canvasId: 'cardPoster',
					background: {
						type: 'image',
						src: this.img,
						// color: 'rgba(0, 0, 0, 0.6)',
						w: 566,
						h: 852,
						r: 20
					}
				})
			},
			// 绘制内容
			async drawCanvas() {
				let { draw, url, img, regcode } = this
				console.log(img)
				// return
				let res = await draw.createdSharePoster(({ ctxObj, style }) => {
					let { width, height } = ctxObj
					this.posterStyle = style
					// 距离x轴的距离
					let offsetX = 30
					let offsetY = 20
					// let userHead = {
					// 	name: 'userHead',
					// 	type: 'image',
					// 	src: userhead,
					// 	drawType: 'arc',
					// 	w: 70,
					// 	h: 70,
					// 	x: 33,
					// 	y: 632
					// }
					// 用户名称
					// let userName = {
					// 	type: 'text',
					// 	text: username,
					// 	color: '#ffffff',
					// 	font: {
					// 		size: 27
					// 	},
					// 	x: 115,
					// 	y: 661
					// }
					// 邀请码
					let regcode = {
						type: 'text',
						text: this.regcode,
						color: '#ffffff',
						font: {
							size: 42
						},
						x: 33,
						y: 720
					}
					// 邀请文字
					let yaoqing = {
						type: 'text',
						text: '快来加入我们吧～',
						color: '#ffffff',
						font: {
							size: 23
						},
						x: 33,
						y: 778
					}
					// 二维码图
					let qcCode = {
						name: 'qcCode',
						type: 'qrcode',
						text: url,
						size: 200,
						x: 358, // x轴方向 默认 0
						y: 641, // y轴方向 默认 0
						size: 177,
					}
			
					return [regcode, yaoqing, qcCode]
				})
				console.log('res', res)
				if (!res.success) return
			
				this.posterImg = res.data
				// uni.previewImage({
				// 	urls:[res.data]
				// })
				this.handlerShow()
			},
			handlerShow() {
				this.show = !this.show
			},
			// 保存图片
			async saveImage() {
				let { posterImg } = this
				let res = await saveImageToPhotosAlbum(posterImg)
				if (!res.success) return
				showToast('保存成功')
				this.handlerShow()
			},
			getinvite_friends() {
				this.$api.invite_friends().then(res=>{
					console.log(res)
				})
			},
			copy() {
				this.$tool.copy(this.url)
			},
		}
	}
</script>

<style lang="scss">
page {
	background: url('@/static/image/friend/friendBG.png') no-repeat;
	background-size: 100% 100vh;
}
.btn {
		width: 269rpx;
		height: 77rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4394FE;
		font-size: 30rpx;
		border-radius: 15rpx;
		margin: 40rpx auto;
		background-color: #FFFFFF;

	}
	.canvas {
		position: fixed;
		top: -99999999999rpx;
		left: -99999999999rpx;
		z-index: -99999999999;
		opacity: 0;
	}
	.poster-img {
		width: 600rpx;
		height: auto;
		margin: 0 auto;
	
		.img {
			width: 100%;
		}
	}
	/deep/.u-mode-center-box {
		background-color:transparent !important;
	}
</style>
